<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .box{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
   </style>
</head>
<body>
   <div id="box"></div>
</body>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script type="text/javascript">
      //烟花效果
      // 创建构造函数
      function FireWork(){
         // console.log(1);
         // 获取已有元素
         this.container = document.querySelector('#box');
         this.bindEvent();
      }
      // 先创建一个烟花主体，绑定点击事件
      FireWork.prototype.bindEvent = function(){
         var self = this;
         // 绑定点击事件
         self.container.onclick = function(evt){
            var e = evt || event;
            // 生成一个随机颜色的圆点
            var fireWork = self.creatFire();
            // 算出圆点起始左边距
            fireWork.style.left = evt.offsetX + 'px';
            // 利用定时，进行运动
            $(fireWork).animate({
               // 高度
               top : evt.offsetY
                },800 , function(){
                  fireWork.remove();
            })
         }
      }
      FireWork.prototype.creatFire = function(){
         // var  self = this;
         // 创建节点
         var div = document.createElement('div');
         // 设置节点类名和属性
         div.className = 'box';
         div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
         // 加入#box
         this.container.appendChild(div);
         return div;
      }

      var Fw = new FireWork();
      
   </script>
</html>